<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        .notification-popup {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            cursor: pointer;
            max-width: 300px;
            text-align: center;
        }

        .notification-popup:hover {
            background-color: #f5c6cb;
        }
    </style>
</head>
<body>
<h2>你好</h2>

<div th:if="${unreadCount > 0}" class="notification-popup"
     th:onclick="'window.location.href=\'' + @{/user/notifications/{userId}(userId=${session.userId})} + '\''">
    您有 <strong th:text="${unreadCount}">未读通知</strong> 条，点击查看。
</div>


<a href="#" th:href="@{/user/notifications/{userId}(userId=${session.userId})}">查看我的通知</a>

<script>
    // 可选：自动隐藏提示框
    setTimeout(function () {
        const popup = document.querySelector('.notification-popup');
        if (popup) {
            popup.style.display = 'none';
        }
    }, 5000); // 5秒后隐藏
</script>
</body>
</html>
